<template>
  <div id="topBarXBox">
    <header>
      <div @click="goBack">
        <span id="close"></span>
      </div>
      {{this.title}}
      <a id="goRegister" href="/register">去注册</a>
    </header>
  </div>
</template>
<script>
import {getStore} from '../../../config/mUtils.js'

export default {
  props:['title'],
  methods:{
    goBack(){
      if(getStore('pre')){
        this.$router.go(-2)
      }else{
        this.$router.push('/home')
      }
    },
  },
}
</script>
<style lang="less" scoped>
  #topBarXBox{
    width: 9.2rem;
    margin: 0 auto;
    header{
      height: 1.3333rem;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.4rem;
      div{
        // background-color:yellow;
        width:.5rem;
        height:.5rem;
        position: absolute;
        left: 0.4rem;
        line-height:.5rem;
        top:.2rem
      }
      #close{
        width:0.5rem;
        height:1px;
        background: #c3c3c3;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        display: inline-block;
      }
      #close::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width:0.5rem;
        height:1px;
        background: #c3c3c3;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
      }
      #goRegister{
        position: absolute;
        right: 0.4rem;
        font-size: .46rem;
        color:#000000;
      }
    }
  }
</style>
